<template>
  <div>
    <PageTools>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="工单编号">
          <el-input
            v-model="formInline.taskCode"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="工单状态">
          <el-select v-model="formInline.status" placeholder="请选择" clearable>
            <el-option
              v-for="item in statusList"
              :key="item.statusId"
              :label="item.statusName"
              :value="item.statusId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="Search"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </PageTools>
    <el-card class="main">
      <el-button
        style="margin-bottom: 10px"
        type="primary"
        size="small"
        icon="el-icon-circle-plus-outline"
        @click="addForm"
      >新建</el-button>
      <el-button
        style="margin-bottom: 10px"
        type="success"
        size="small"
        @click="dialogFormVisible = true"
      >工单配置</el-button>
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="list"
        style="width: 100%"
        :header-cell-style="{
          //标题头部的颜色
          //'text-align': 'center',
          fontWeight: 'normal',
          background: '#f3f6fb',
          // color: 'black',
        }"
      >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column label="工单编号" prop="taskCode" name="taskCode" />
        <el-table-column label="设备编号" prop="innerCode" name="innerCode" />
        <el-table-column label="工单类型" prop="taskType.typeName" />
        <el-table-column
          label="工单方式"
          prop="createType"
          :formatter="createType"
        />
        <el-table-column
          label="工单状态"
          prop="taskStatusTypeEntity.statusName"
        />
        <el-table-column label="运营人员" prop="userName" />
        <el-table-column
          label="创建日期"
          prop="updateTime"
          :formatter="updateTime"
          width="170"
        />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="small"
              @click="detailsFn(row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="19">
          <p class="paginationHeader">
            {{
              `共${page.totalCount}条记录 第${page.pageIndex}/${page.totalPage}页`
            }}
          </p>
        </el-col>
        <el-col :span="5">
          <el-pagination
            background
            :current-page="page.pageIndex"
            :page-size="page.pageSize"
            :total="page.totalCount"
            layout="prev, next"
            prev-text="上一页"
            next-text="下一页"
            @current-change="changePage"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 工单配置弹出框 -->
    <el-dialog
      title="工单配置"
      :visible="dialogFormVisible"
      width="45%"
      @open="opneDialog"
    >
      <el-form label-width="120px" :model="dialogForm" :rules="alertValueRules">
        <el-form-item label="补货警戒线" prop="alertValue">
          <el-input-number
            v-model="dialogForm.alertValue"
            style="width: 80%"
            controls-position="right"
            :min="10"
            :max="100"
            placeholder="请输入"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          class="cancel"
          @click="dialogFormVisible = false"
        >取 消</el-button>
        <el-button
          type="primary"
          class="sure"
          @click="postautoSupplyConfig"
        >确 定</el-button>
      </div>
    </el-dialog>
    <!--新增配置工单 -->
    <AddFroms
      :dialog-form-visible="visible"
      @closeFn="closeFn"
      @sureFn="sureFn"
    />
    <!-- 查看详情 -->
    <DetailsFrom
      :details-visible="detailsVisible"
      :item="detailsItem"
      @detailsClose="detailsClose"
      @cancelList="cancelList"
    />
  </div>
</template>

<script>
import {
  allTaskStatus,
  taskSearch,
  getsupplyAlertValue,
  postautoSupplyConfig
} from '@/api/task'
import DetailsFrom from '@/views/Task/components/details-from.vue'
// import AddFrom from '@/views/Task/components/add-from.vue'
import AddFroms from '@/views/Task/components/addForm.vue'
export default {
  components: { AddFroms, DetailsFrom },
  data() {
    return {
      detailsItem: {}, // 把点击详情每一行传递给子组件
      detailsVisible: false, // 查看详情弹出框
      visible: false, // 这是新增表单的弹出框
      dialogFormVisible: false, // 弹出层的显示
      statusList: '', // 工单状态下拉列表
      formInline: {
        taskCode: '',
        status: ''
      },
      list: [],
      page: {
        // 页码
        totalCount: 0, // 总记录
        pageIndex: 1, // 当前页
        pageSize: 10, // 页码显示数据
        totalPage: 0, // 总页数
        isRepair: false,
        status: null
      },
      dialogForm: {
        alertValue: 10
      },
      // 补货警戒线
      alertValueRules: {
        alertValue: [{ required: true, message: '请输入', trigger: 'change' }]
      },
      loading: false
    }
  },
  created() {
    this.allTaskStatus()
    this.taskSearch()
  },
  methods: {
    // 1.工单状态
    async allTaskStatus() {
      const { data } = await allTaskStatus()
      this.statusList = data
    },
    // 2.获取列表数据
    async taskSearch() {
      this.loading = true
      const { data } = await taskSearch({ ...this.page, ...this.formInline })
      this.list = data.currentPageRecords
      this.loading = false
      this.page.totalCount = Number(data.totalCount)
      this.page.pageIndex = Number(data.pageIndex)
      this.page.pageSize = Number(data.pageSize)
      this.page.totalPage = Number(data.totalPage)
    },
    // 3.分页的当前页码如果到下一页就请求下一页数据
    changePage(index) {
      this.page.pageIndex = index
      this.taskSearch()
    },
    // 4.头部的查询
    // formatter	用来格式化内容接收四个回调函数
    Search() {
      this.taskSearch()
    },
    // 5.工单方式的转换0,1转换成文字
    createType(row, column, callValue, index) {
      if (callValue === 1) {
        return '手动'
      } else {
        return '自动'
      }
    },
    // 5.1.将创建时间的类型转换一下
    // 数据库操作时间类型为：datetime 类型--需要把toLocaleString()转换
    // 响应给前端，前端接收显示为：2022-03-18T01:46:08.000+00:00 这种加了时区的格式
    updateTime(row, column, callValue, index) {
      const time = new Date(callValue).toLocaleString()
      return time
    },
    // 6.工单配置弹出框--打开调用警戒线接口数据
    // 预警值(百分比，如50代表,满量的百分之50为补货预警值)
    async opneDialog() {
      const { data } = await getsupplyAlertValue()
      this.dialogForm.alertValue = data
    },
    // 6.1.工单配置--确定
    async postautoSupplyConfig() {
      await postautoSupplyConfig(this.dialogForm.alertValue)
      this.taskSearch()
      this.dialogFormVisible = false
    },
    // 7.新增工单设置
    addForm() {
      this.visible = true
    },
    // 7.1关闭表单
    closeFn() {
      this.visible = false
    },
    // 点击子组件点击确定关闭页码并且重新拉去表格数据
    sureFn() {
      this.visible = false
      this.taskSearch()
    },
    // 8.点击查看详情--打开
    detailsFn(row) {
      this.detailsItem = row
      this.detailsVisible = true
    },
    // 8.1关闭查看详情
    detailsClose() {
      this.detailsVisible = false
    },
    // 8.2.待办的工单详情-触发父亲取关闭弹出层-并且从新属性表格数据
    cancelList() {
      console.log('我是子组件的工单取消')
      this.page.status = 1
      this.taskSearch()
      this.detailsVisible = false
    }
  }
}
</script>

<style lang="scss">
.demo-form-inline {
  margin-top: 20px;
  color: #606266;
  font-size: 14px;
  font-weight: normal;
  .el-button--primary {
    background-color: #5f84ff;
    height: 36px;
    padding: 0;
    text-align: center;
    min-width: 80px;
  }
}
.main {
  margin: 20px;
  // padding: 17px;
  .el-button--primary {
    background: linear-gradient(135deg, #ff9743, #ff5e20);
    border: unset;
    height: 36px;
    width: 80px !important;
  }
  .el-button--success {
    background-color: #fbf4f0 !important;
    border: none;
    color: #655b56 !important;
    height: 36px;
    width: 80px !important;
  }
  .paginationHeader {
    font-size: 16px;
    color: #dbdfe5;
    padding-left: 8px;
  }
   .el-pagination{
  padding-left: 22px;
 }
  .el-pagination button:disabled {
    width: 70px;
    height: 32px;
  }
  .el-pagination .btn-next,
  .el-pagination .btn-prev {
    width: 70px;
    height: 32px;
  }
}
.el-table__row {
  height: 44px;
}
.el-table {
  position: unset;
}
.el-table thead {
  color: #666666 !important;
}
.el-table td,
.el-table th.is-leaf {
  border-bottom: 0 !important;
}
.el-table--fit {
  margin-top: 10px;
}
.el-table td {
  padding: 0px;
}
.el-button--text {
  color: #5f84ff;
  height: 36px;
}
.el-dialog {
  border-radius: 10px;
  .el-dialog__header .el-dialog__title {
    color: #333333;
    font-size: 16px;
    font-weight: bold;
  }
  .el-dialog__header {
    border-radius: 10px;
    background-color: #fff;
  }
  .el-icon-close:before {
    color: #909399;
  }
  .el-dialog__body {
    padding: 15px 20px;
  }
  .dialog-footer {
    padding: 0 20px 10px 20px;
    .cancel {
      background-color: #fbf4f0 !important;
      border: unset;
      padding-top: 10px;
      height: 36px;
      width: 80px !important;
    }
    .sure {
      background: linear-gradient(135deg, #ff9743, #ff5e20);
      border: unset;
      color: #fff;
      height: 36px;
      width: 80px !important;
    }
  }
  .el-input {
    .el-input__inner {
      height: 40px;
      &::placeholder {
        text-align: left;
      }
    }
  }
}
</style>
